<template>
  <div>
    <div class="chart-title">情绪占比</div>
    <div id="pie1"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: "",
      negativeCount: 0,
      midCount: 0,
      positiveCount: 0
    };
  },
  computed: {
    toutalCount(){
      return this.negativeCount + this.midCount + this.positiveCount
    }
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
    this.fetchList()
  },

  methods: {
    async fetchList() {
      const response = await this.$http.get("metrics/getSentimentPercentages")
      if (response.status == 200) {
        const data = response.data
        const percentage = data.sentimentCounts
        this.negativePer = percentage.negative.toFixed(2)
        this.midPer = percentage.mid.toFixed(2)
        this.positivePer = percentage.positive.toFixed(2)
        const count = data.sentimentDocCounts
        this.negativeCount = count.negative
        this.midCount = count.mid
        this.positiveCount = count.positive
        this.updateChartData()
      }
    },
    initChart() {
      
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("pie1"));
      
      var seriesData = [
        {
          name: "好评",
          value: 0,
          rate: 0
        },
        {
          name: "差评",
          value: 0,
          rate: 0
        },
        {
          name: "一般评论",
          value: 0,
          rate: 0
        }
      ];
      var optionRich = {
        a: {
          width: 60,
          fontSize: 18,
          fontWeight: 400,
          color: "#FFF",
          lineHeight: 20,
          padding: [0, 50, 0, 0]
        }
      };
      var optionColorArr = {
        好评: "#5694FF",
        差评: "#FFCC1A",
        一般评论: "#FF9152"
      };
      seriesData.forEach((ele, i) => {
        optionRich[i] = {
          width: 20,
          fontSize: 18,
          fontWeight: 400,
          lineHeight: 20,
          color: optionColorArr[ele.name],
          align: "center",
          padding: [0, 0, 0, 20]
        };
      });

      this.chart.setOption({
        color: seriesData.map(item => optionColorArr[item.name]),
        
        title: {
          text: `{a| 总评论数 }`,
          textStyle: {
            rich: {
              a: {
                fontSize: 22,
                color: "#FFF",
                padding: [0, 0, 0, -9]
              }
            }
          },
          subtext: `{a|${0 + "条"}}`,
          subtextStyle: {
            rich: {
              a: {
                fontSize: 28,
                color: "#FFF",
                padding: [0, 0, 0, 3]
              }
            }
          },
          x: "14%",
          y: "40%"
        },
        tooltip: {
          trigger: "item",
          show: true,
          formatter: params => {
            const {data, name, value} = params;
            return `
               <div style="color: ${params.color}; font-size: 18px;">${name}&nbsp;&nbsp;&nbsp;<span style="font-size: 20px; color: #000; float: right;">${value}</span></div>
               <div style="color: ${params.color}; font-size: 17px;">占比&nbsp;<span style="font-size: 20px; color: #000; float: right;">${data.rate}%</span></div>
            `;
          }
        },
        grid: {
          top: "0",
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "50%",
          align: "left",
          top: "middle",
          icon: "circle",
          itemHeight: 15,
          itemWidth: 15,
          itemGap: 20,
          height: 300,
          formatter: function (name) {
            let index = 0;
            let value = 0;
            let rate = 0;
            seriesData.forEach((item, i) => {
              if (item.name == name) {
                value = item.value ? item.value : 0;
                rate = item.rate ? item.rate : 0;
                index = i;
              }
            });
            return `{a|${name}}{${index}|${rate +
            "%"}}{${index}|${"|"}}{${index}|${value}}`;
          },
          textStyle: {
            rich: optionRich
          }
        },
        series: [
          {
            type: "pie",
            center: ["25%", "50%"],
            radius: ["40%", "60%"],
            clockwise: true, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              }
            },
            data: seriesData
          }
        ]
      });
    },
    updateChartData(){
      const seriesData = [
        {
          name: "好评",
          value: this.positiveCount,
          rate: this.positivePer,
        },
        {
          name: "差评",
          value: this.negativeCount,
          rate: this.negativePer
        },
        {
          name: "一般评论",
          value: this.midCount,
          rate: this.midPer
        }
      ];
      this.chart.setOption({
        title: {
          subtext: `{a|${this.toutalCount }}`,
        },
        legend: {
          title: {
            text: `{a| 总评论数 }`,
            subtext: `{a|${this.toutalCount + "条"}}`
          },
          formatter: function (name) {
            let index = 0;
            let value = 0;
            let rate = 0;
            seriesData.forEach((item, i) => {
              if (item.name == name) {
                value = item.value ? item.value : 0;
                rate = item.rate ? item.rate : 0;
                index = i;
              }
            });
            return `{a|${name}}{${index}|${rate +
            "%"}}{${index}|${""}}{${index}|${value}}`;
          }
        },
        series: [
          {
            data: seriesData
          }
        ]
      })
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

<style lang="scss" scoped>
.chart-title {
  color: #FFFFFF; /* 白色 */
  font-size: 20px; /* 根据需要调整字体大小 */
  text-align: center;
  height: 0vh;
  font-weight: bold; /* 将字体设为粗体 */
  font-family: "MyBoldFont", sans-serif; /* 使用自定义字体 */
  margin-top: 10px; /* 增加顶部边距以使文字下移 */
}
#pie1 {
  width: 90%;
  height: 40vh;
}
</style>
